<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态绑定style</title>
	</head>
	<body>
		<div id="app">
			<!-- 动态绑定 style 的对象语法，和css非常相似  其实他就是一个JavaScript对象-->
			<div :style="{color:'green'}">Vue样式绑定</div>
			<h2  :style="[sobj1,sobj2]">数组样式</h2>
			
			<span :style="{color:'red',fontSize:fz+'px'}">对象内联样式</span>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					sobj1:{
						color:"pink"
					},
					sobj2:{
						/* css属性名要驼峰命名(fontSize) ,或者短横命名(font-size) */
						// fontSize:"50px"
						"font-size":"50px"
					},
					fz:10
				}
			})
		</script>
	</body>
</html>
